<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>看字读字速度</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .app{
            position:absolute;left:10px;top:80px; width:300px; height:80px;
            border:1px solid;border-radius:25px;
            background-color:#555555;
        }
        .record-btn{
            position:absolute;left:120px;top:55px
        }
    </style>
</head>

<body>

    <script src="../libs/minicomps.min.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script>
        const SM = 'b,p,m,f,d,t,n,l,g,k,h,j,q,x,zh,ch,sh,r,z,c,s,y,w';
        const YM = 'a,o,e,i,u,ü,ai,ei,ui,ao,ou,iu,ie,üe,er,an,en,in,un,ün,ang,eng,ing,ong';
        const ZT = 'zhi,chi,shi,ri,zi,ci,si,yi,wu,yu,ye,yue,yuan,yin,yun,ying';
        const { Toggle, HSlider, VSlider, Panel, Canvas, Button, TextArea, TextBox, TextInput, Label, Window, Image, LabelInput, TipsManager, RadioButton, ColorPicker, TabbarWindow, Checkbox, Knob, Stage, MoonTextArea, Dropdown } = mc
        const width = Stage.width;
        const height = Stage.height;
        const halfWid = width / 2;
        const canHalfWid = halfWid / 2;
        const panel = new Panel(document.body, 0, 0, width, height);
        const centerPanel = new Canvas(panel, width / 4, 10, halfWid, 40);
        const [sx, ex] = [halfWid / 2 - 20, halfWid / 2 + 20];
        new Label(panel, halfWid, 50, '读');

        var [x, y] = [halfWid - 400, 150]
        new HSlider(panel, halfWid - 50, y - 50, '速度', 50, 1, 100, (e) => { speed = -e.detail * 0.04 });
        let names = ['声母', '韵母', '整体认读', '清除'];
        for (let i = 0; i < names.length; i++) {
            new Button(panel, x + 200 + i * 100, y, names[i], onSelect);
        }
        let labels = [];
        function onSelect(e) {
            labels = [];
            let arr = [];
            switch (e.target.label) {
                case '声母': arr = SM.split(','); break;
                case '韵母': arr = YM.split(','); break;
                case '整体认读': arr = ZT.split(','); break;
                case '清除': moonjs.removeAll(); return;
            }
            createLabel(arr);
        }
        function createLabel(arr) {
            moonjs.removeAll();
            let num=Number(numWid.input.text);
            if(isNaN(num))num=100;
            for (let i = 0; i < arr.length; i++) {
                let label = moonjs.createDisplay('font').setText(arr[i]).setXY(0, 30).setFont("30px Arial").setColor('#000000');
                label.x = canHalfWid + num + i * num;
                labels.push(label);
            }
        }
        y += 50;
        x += 200;
        let input = new TextInput(panel, x, y).setSize(400);
        y += 30
        let sign = new LabelInput(panel, x, y, '分隔符');
        sign.input.setSize(50);
        let numWid = new LabelInput(panel, x+100, y, '字间距离');
        numWid.input.setSize(50);
        numWid.input.text='100';
        new Button(panel, x + 300, y, '确定', onClick);
        function onClick(e) {
            labels = [];
            let s = sign.input.text;
            let arr = input.text.split(s);
            createLabel(arr);
        }

        var moonjs = new MoonJs();
        moonjs.init(centerPanel);
        moonjs.start();

        let speed = -2;
        function update(e) {
            labels.forEach(item => {
                item.x += speed;
                if (item.x > sx && item.x < ex) {
                    item.setColor('#ff0000');
                } else {
                    item.setColor('#000000');
                }
            })
        }
        TimeFactory.createGameTime('keyName', update, 30);


        const recordBtn = document.querySelector(".record-btn");
        const player = document.querySelector(".audio-player");

        if (navigator.mediaDevices.getUserMedia) {
            var chunks = [];
            const constraints = { audio: true };
            navigator.mediaDevices.getUserMedia(constraints).then(
                stream => {
                    console.log("授权成功！");

                    const mediaRecorder = new MediaRecorder(stream);

                    recordBtn.onclick = () => {
                        if (mediaRecorder.state === "recording") {
                            mediaRecorder.stop();
                            recordBtn.textContent = "record";
                            console.log("录音结束");
                        } else {
                            mediaRecorder.start();
                            console.log("录音中...");
                            recordBtn.textContent = "stop";
                        }
                        console.log("录音器状态：", mediaRecorder.state);
                    };

                    mediaRecorder.ondataavailable = e => {
                        chunks.push(e.data);
                    };

                    mediaRecorder.onstop = e => {
                        var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
                        chunks = [];
                        var audioURL = window.URL.createObjectURL(blob);
                        player.src = audioURL;
                    };
                },
                () => {
                    console.error("授权失败！");
                }
            );
        } else {
            console.error("浏览器不支持 getUserMedia");
        }
        //     new Label(panel,300,10,'无声的拼音转为四个声调的拼音，例如xia->[xiā,xiá,xiǎ,xià]')
        //     let [x,y,w,h]=[300,30,700,250];
        //     const input=new TextInput(panel,x,y);
        //     const ouput=new TextArea(panel,x,y+30);
        //     input.setSize(w);
        //     ouput.setSize(w,h);
        //     new Button(panel,x+w,y,'确定',onClick);
        //     let checkBox=new Checkbox(panel, x+w+5, y+30, '使用逗号分隔(默认是使用回车符)', false);
        //     let names=['第一声','第二声','第三声','第四声'];
        //     let checkBoxs=[];
        //     for(let i=0;i<4;i++){
        //         checkBoxs.push(new Checkbox(panel, x+w+5, y+60+i*30, names[i], true));
        //     }
        //     function onClick(e){
        //         let oup='';
        //         let arr=input.text.split(',');
        //         let nums=[];
        //         for(let i=0;i<4;i++){
        //             let cb=checkBoxs[i];
        //             if(cb.checked){
        //                 nums.push(i+1)
        //             }
        //         }
        //         console.log(nums)
        //         for(let i=0;i<arr.length;i++){
        //              let val1=arr[i];
        //              let val2=Unify.changePinyin2(val1,0,nums);
        //              oup+=val2+',';
        //         }
        //         oup=oup.substr(0,oup.length-1);
        //         oup=oup.replaceAll(',',checkBox.checked?',':'\n')
        //         ouput.text=oup;
        //     }
        //     //-----------------------
        //     y+=h+60;
        //     new Label(panel,x,y,'有声调的拼音转为带数字的拼音，例如xiá->xia2')
        //     y+=20;
        //     const input2=new TextInput(panel,x,y);
        //     const ouput2=new TextArea(panel,x,y+30);
        //     input2.setSize(w);
        //     ouput2.setSize(w,30);
        //     new Button(panel,x+w,y,'确定',onClick21);
        //     function onClick21(e){
        //         let oup='';
        //         let arr=input2.text.split(',');
        //         for(let i=0;i<arr.length;i++){
        //              let val1=arr[i];
        //              let val2=Unify.changePinyin(val1,0);
        //              oup+=val2+',';
        //         }
        //         oup=oup.substr(0,oup.length-1);
        //         ouput2.text=oup;
        //     }
        //     //-----------------------
        //     y+=80;
        //     new Label(panel,x,y,'有声调的拼音转为带数字的拼音，例如xia2->xiá')
        //     y+=20;
        //     const input3=new TextInput(panel,x,y);
        //     const ouput3=new TextArea(panel,x,y+30);
        //     input3.setSize(w);
        //     ouput3.setSize(w,30);
        //     new Button(panel,x+w,y,'确定',onClick22);
        //     function onClick22(e){
        //         let oup='';
        //         let arr=input3.text.split(',');
        //         for(let i=0;i<arr.length;i++){
        //              let val1=arr[i];
        //              let val2=Unify.changePinyin(val1,1);
        //              oup+=val2+',';
        //         }
        //         oup=oup.substr(0,oup.length-1);
        //         ouput3.text=oup;
        //     }
        //     //-----------------------
        //     y+=80;
        //     new Label(panel,x,y,'替换功能')
        //     y+=20;
        //     const input4=new TextInput(panel,x,y);
        //     const ouput4=new TextArea(panel,x,y+30);
        //     input4.setSize(w);
        //     ouput4.setSize(w,30);
        //     const input41=new TextInput(panel,x+100,y-22,'');
        //     const input42=new TextInput(panel,x+200,y-22,',');
        //     input41.setSize(50);input42.setSize(50)
        //     new Button(panel,x+w,y,'确定',onClick23);
        //     function onClick23(e){
        //         ouput4.text=input4.text.split(input41.text).join(input42.text);
        //     }

        //     new TextInput(panel,x,y+100,'一些特殊字符：āáǎà,ōóǒò,ēéěè,ī í ǐ ì i,ūúǔù,ǖǘǚǜü,a,g').setSize(400,30)

        //    var sm='b,p,m,f,d,t,n,l,g,k,h,j,q,x,z,c,s,zh,ch,sh,r,y,w';
        //    var ym='a,ai,an,ang,ao,o,ong,ou,e,ei,en,eng,i,ia,iao,ian,iang,ie,in,ing,iong,iu,u,ua,uai,uan,uang,ui,un,uo,ü,üan,üe,ün';
        //    sm=sm.split(','); ym=ym.split(',');
        //    [x,y,sms,yms]=[10,10,[],[]];
        //    for(let i=0;i<sm.length;i++){
        //         sms.push(new Checkbox(panel, x, y+i*23, sm[i], false));
        //    }
        //    sms.push(new Checkbox(panel, x, y+sm.length*23, '', false));
        //    x=100
        //    for(let i=0;i<ym.length;i++){
        //         yms.push(new Checkbox(panel, x, y+i*20, ym[i], false));
        //    }
        //    new Button(panel,x+50,y,'确定',onClick3);
        //    new Button(panel,x+50,y+50,'重选',onClick4);
        //    function onClick3(e){
        //         let [inp,oup]=['','']
        //         for(let i=0;i<sms.length;i++){
        //             let cb1=sms[i];
        //             if(cb1.checked){
        //                 for(let j=0;j<yms.length;j++){
        //                     let cb2=yms[j];
        //                     if(cb2.checked){
        //                         let val=cb1.label+cb2.label
        //                         inp+=val+','
        //                         oup+=val+'\n'
        //                     }
        //                 }
        //                 inp=inp.substr(0,inp.length-1);
        //                 oup=oup.substr(0,oup.length-1);
        //                 input.text=inp;
        //                 ouput.text=oup;
        //                 break;
        //             }
        //         }
        //    }
        //    function onClick4(){
        //         for(let i=0;i<sms.length;i++){
        //                 let cb1=sms[i];
        //                 cb1.checked=false;
        //         }
        //         for(let j=0;j<yms.length;j++){
        //             let cb2=yms[j];
        //             cb2.checked=false;
        //         }
        //    }
    </script>
        <div class="app">
            <audio controls class="audio-player" ></audio>
            <button class="record-btn">record</button>
        </div>
</body>

</html>